<template>
  <input
    :type="type"
    :placeholder="placeholder"
    :value="todoText"
    v-bind="$attrs"
    v-on="inputListeners"
  />
</template>

<script>
export default {
  name: "TodoInput",
  props: ["todoText", "placeholder", "type"],
  model: {
    prop: "todoText", // 默认传递的 props 是 value，现在改为 todoText
  },
  mounted() {
    console.log("所有属性：", this.$attrs);
    console.log("所有事件监听：", this.$listeners);
  },
  computed: {
    inputListeners: function () {
      var vm = this;
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign(
        {},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit("input", event.target.value);
          },
        }
      );
    },
  },
  methods: {
    // handlerInput(e) {
    //   this.$emit("input", e.target.value);
    // },
  },
};
</script>

<!-- scoped 局部 css ，当前组件生效，不会影响其他组件 -->
<style lang="scss">
input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #333;
  outline: none;
  padding: 0 10px;
}
</style>